<template>
  <div class="program">
    <el-table :data="programslist" style="width: 100%" :show-header="false" stripe fit lazy @row-dblclick="playMuaic">
      <el-table-column type="index" align="center" width="40" style="display: flex; align-items: center;">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <div class="left">
            <div class="img">
              <img :src="scope.row.coverUrl" />
              <i class="iconfont icon-playcircle"></i>
            </div>
            <span class="name">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column width="130">
        <template slot-scope="scope">
          <span class="playCount">播放：{{ scope.row.listenerCount }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120">
        <template slot-scope="scope">
          <span class="likedCount">赞：{{ scope.row.likedCount }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160">
        <template slot-scope="scope">
          <span class="createTime">{{ scope.row.createTime | showDate }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80">
        <template slot-scope="scope">
          <span class="time">{{ scope.row.duration }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
import { formatDate } from '../../common/util.js'
export default {
  props: ['programslist', 'count'],
  data () {
    return {
      musiclistIds: [],
      num: 0,
      isloading: true
    }
  },
  methods: {
    // 播放音乐
    playMuaic (row) {
      if (this.isloading) {
        this.programslist.forEach(item => {
          item.num = this.num++
          this.musiclistIds.push(item.mainTrackId)
        })
        this.isloading = false
        // console.log(this.musiclistIds)
      }
      // console.log(row.mainTrackId)
      if (row.mainTrackId === null) return
      this.getMusicUrl(row.mainTrackId)
      this.getMusicMenu(row.mainTrackId)
      this.$store.commit('musicListIds', this.musiclistIds)
      this.$store.commit('musicIndex', row.num)
      this.$store.commit('setMusicCount', this.musiclistIds.length)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    }
  },
  created () {
    // console.log(this.programslist)
    // this.programslist.forEach(item => {
    //   item.num = this.num++
    //   this.musiclistIds.push(item.mainTrackId)
    // })
    // console.log(this.musiclistIds)
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatDate(date, 'yyyy-MM-dd')
    }
  }
}
</script>

<style lang="less" scoped>
  .left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .img {
      position: relative;
      width: 50px;
      height: 50px;
      img {
        width: 100%;
      }
      i {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 25px;
        color: #fff;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
      i:hover {
        background: rgba(0, 0, 0, 0.5);
      }
    }
    .name {
      margin-left: 10px;
    }
  }
  .playCount, .likedCount, .createTime, .time {
    color: #888888;
  }
</style>
